<template>
	<view class="content">
		<view class="content_image">
			<image src="https://img0.baidu.com/it/u=898013495,1046282177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=254" mode="aspectFill"></image>
		</view>
		<!-- 内容 -->
		<view class="content_botton">
			<view class="content_info">
				<navigator url="../myMain/personalInformation">
				<image :src="headImage"></image>
				</navigator>
				<view class="username">
					{{userName}}
				</view>
				<view class="select">
					<view @click="verify('working')">收藏作品 ({{collecWorkCount}})</view>

					<view @click="verify('article')">收藏文章 ({{collecArticleCount}})</view>
				</view>
			</view>
			<view class="noLogin" v-show="isHidden">
				<image src="https://zhoukaiwen.com/img/loginImg/wx.png" @click="verify('login')"></image>
				<view class="">点击图片登录</view>
			</view>
			
			<!--  -->
			<view class="my_order">
				<view class="my_order_title">
					订单管理
				</view>
				<view class="my_order_item" v-for="item in list">
					<navigator :url="item.link">
					<view class="my_order_content">
						<image :src="item.url" mode="widthFix"></image>
						<view class="">{{item.name}}</view>
					</view>
					</navigator>
				</view>

			</view>
			
			<!--  -->
			<view class="other">
				<view class="other_addres">
					<view @click="verify('address')">我的地址</view>
					<image @click="verify('address')">&gt;</image>
				</view>
				
				<view class="other_addres">
					<view @click="verify('mywork')">我的作品</view>
					<image  @click="verify('mywork')">&gt;</image>
				</view>
				
				<view class="other_product">
					<view @click="verify('myarticle')">我的文章</view>
					<image  @click="verify('myarticle')">&gt;</image>
				</view>
				<view class="other_feedback">
					<view @click="verify('feedback')">意见反馈</view>
					<image @click="verify('feedback')">&gt;</image>
				</view>
				<view class="other_our">
					<view @click="verify('contact')">联系我们</view>
					<image @click="verify('contact')">&gt;</image>
				</view>
			</view>
		</view>
		
		<view class="bottom"></view>
		<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
	</view>
</template>

<script>
import global from '@/global.js'

export default {
data() {
	return {
		userName:'',
		headImage:'',
		collecWorkCount:0,
		collecArticleCount:0,
		isHidden: false, 
		list:[
				{
					id:1,
					url:'../../static/logo.png',
					link:'/pages/orderList/myOrder',
					name:"商品订单"
				},
				{
					id:2,
					url:'../../static/logo.png',
					link:'/pages/painterList/premiumPainter',
					name:"写作需求"
				},
				{
					id:3,
					url:'../../static/logo.png',
					link:'/pages/painterList/painterFollow',
					name:"艺术创作需求"
				}
			],
		//当前选项卡
		currentTab:'/pages/myMain/myMain'
	}
	
},
    methods: {
  	verify(val){
		  var token = uni.getStorageSync("token")
		  var phone = uni.getStorageSync("phone")
		  console.log("caches get  token value :  ", token)
		  console.log("caches get  phone value :  ", phone)
		  
		  console.log("click val :  ", val)
		  switch (val){
		  		case 'working': //收藏作品
		  			uni.navigateTo({
		  			    url: '/pages/workingList/collectionWorkingList'
		  			});
		  			break;
		  		case 'article': //收藏文章
		  			uni.navigateTo({
		  			    url: '/pages/articleList/collectionArticleList'
		  			});
		  			break;
		  		case 'login': //点击登录
		  			uni.navigateTo({
		  			    url: '/pages/login/login'
		  			});
		  			break;
		  		case 'mywork': //我的作品
				    console.log("click val mywork :  ", val)
		  			uni.navigateTo({
		  			    url: '/pages/workingList/myWorkList'
		  			});
		  			break;
		  		case 'myarticle':
		  			uni.navigateTo({  //我的文章
		  			    url: '/pages/articleList/myArticleList'
		  			});
		  			break;
			    case 'feedback':
			    	uni.navigateTo({  //意见反馈
			    	    url: '/pages/myMain/feedback'
			    	});
			    	break;
				case 'contact':
					uni.navigateTo({  //联系我们
					    url: '/pages/myMain/contact'
					});
					break;
				case 'address':
					uni.navigateTo({  //我的地址
					    url: '/pages/myMain/myAddressList'
					});
					break;
		  		default: 		      //个人中心
		  			uni.navigateTo({
		  				url: '/pages/myMain/myMain'
		  			});
		  			break;
		  	}
	  },
	  
	  init(){
		  var that = this;
		  console.log("user baseUrl >>>>>>>>>>>>>>>>>>>>>>>>>> : " , global.baseUrl);
		  
		  var token = uni.getStorageSync("token")
		  console.log("caches get  token value :  ", token)
		  uni.request({
		  	url: global.baseUrl + 'api/my/userInfo',
		  	method: 'get',
		  	dataType: "json",
		  	header: {
				'X-Token': token
		  	},
		  	success: (res) => {
		  		if (res.data.code == 0) {
		  			this.userName=res.data.data.userName;
		  			this.headImage=res.data.data.headImage;
		  			this.collecWorkCount=res.data.data.collecWorkCount;
		  			this.collecArticleCount=res.data.data.collecArticleCount;
		  		} 
		  	},
		  	fail: (error) => {
		  		console.log(error)
		  	}
		  })
		  
	  }
	},
	onLoad() {
		var token = uni.getStorageSync("token")
		console.log("login state token value ", token)
		if(token=='' || token ==null){
			this.isHidden =true
		}
		this.init();
	}
}
</script>

<style lang="scss">
	page{
		background-color:#eee;
	}
   .content_image{
	   image{
		   // 高斯模糊
		   filter: blur(3rpx);
		   width: 100%;
	   }
	   height: 300rpx;
	   position: relative;
   }
   .content_botton{
	   .noLogin{
		   position: absolute;
		   left: 45%;
		    transform: translate(-50%);
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: space-around;
		    margin-top: 1%;
		    margin-left: 5%;
		    border-radius: 20rpx;
		    width: 90%;
		    height: 250rpx;
		    background-color:#fff;
		    justify-content: center;
		    align-items: center;
		    position: relative;
			font-size:30rpx;
		    image{
			   width: 100rpx;
			   height: 100rpx;
		   }
	   }
	   .content_info{
		  position: relative;
		    z-index: 999;
		   display: flex;
		   flex-direction: column;
		   align-items: center;
		   justify-content: space-around;
		   margin-top: 4%;
		   margin-left: 5%;
		   border-radius: 20rpx;
		   width: 90%;
		   height: 250rpx;
		   background-color:#fff;
		   image{
			   margin-top: -40rpx;
			   width: 200rpx;
			   height: 200rpx;
			   border-radius: 50%;
		   }
		   .username{
			   
		   }
		   .select{
			   display: flex;
			   justify-content: space-between;
			   view{
				   padding: 0 50rpx;
				   height: 200rpx;
			   }
		   }
	   }
	   .my_order{
		   width: 90%;
		   margin-top: 10rpx;
		   margin-left: 5%;
		   height: 280rpx;
		   border-radius: 20rpx;
		   background-color: #fff;
		   .my_order_title{
			   border-radius: 20rpx;
			   padding-left: 20rpx;
			   line-height: 80rpx;
			   height: 80rpx;
		   }
		   .my_order_item{
			   padding: 4.5%;
		       float: left;
			  .my_order_content{
				  display: flex;
				  flex-direction: column;
				  align-items: center;
				  font-size:30rpx;
				  justify-content: space-between;
				  image{
				  		width: 40rpx;
				  		height: 40rpx;
				  }
			  }
		   }
	   }
   }
   .other{
	  margin: 10rpx 40rpx;
	   height: 490rpx;
	   width: 90%;
	   border-radius: 20rpx;
	   background-color: #fff;
	   .other_addres{
		   height: 60rpx;
		   padding: 20rpx 20rpx;
		   border-bottom: 1rpx dashed gainsboro;
		   display: flex;
		   justify-content: space-between;
		   image{
			   width: 50rpx;
		   }
	   }
	   .other_product{
	   		   height: 60rpx;
	   		   padding: 20rpx 20rpx;
	   		   border-bottom: 1rpx dashed gainsboro;
	   		   display: flex;
	   		   justify-content: space-between;
	   		   image{
	   			   width: 50rpx;
	   		   }
	   }
	   .other_feedback{
	   		   height: 60rpx;
	   		   padding: 20rpx 20rpx;
	   		   border-bottom: 1rpx dashed gainsboro;
	   		   display: flex;
	   		   justify-content: space-between;
	   		   image{
	   			   width: 50rpx;
	   		   }
	   }
	   .other_our{
		   height: 60rpx;
		   padding: 20rpx 20rpx;
		   display: flex;
		   justify-content: space-between;
		   image{
		   		width: 50rpx;
		   }
	   }
   }
</style>

